import React, { Component } from "react";
import ReactDom from "react-dom";
import './index.css';

function App() {
    return React.createElement(
        "div",
        { className: "box" },
        React.createElement(Warp, null)
    );
}

class Warp extends Component {
    // 定义组件中内部状态
    constructor() {
        super();
        this.state = {
            title: ["id--", "姓名--", "性别--", "成绩--", "等级--"],
            list: [{
                id: 1,
                name: "诸葛亮",
                sex: '男',
                score: 98
            }, {
                id: 2,
                name: "周瑜",
                sex: '男',
                score: 88
            }, {
                id: 3,
                name: "刘阿斗",
                sex: '男',
                score: 50
            }, {
                id: 4,
                name: "曹植",
                sex: '男',
                score: 90
            }, {
                id: 5,
                name: "张飞",
                sex: '男',
                score: 70
            }, {
                id: 6,
                name: "曹丕",
                sex: '男',
                score: 55
            }]
            /*             grade:{
                        } */
        };
    }
    // 渲染视图
    render() {
        // 通过解构赋值拿到数据
        const {
            title,
            list
        } = this.state;

        return React.createElement(
            "div",
            null,
            React.createElement(
                "p",
                null,
                title
            ),
            React.createElement("div", null)
        );
    }
}

ReactDom.render(React.createElement(App, null), document.getElementById('root'), () => {
    console.log("渲染完成");
});
